<template>
  <div class="show-container" v-theme:blue >
    <h1>博客总览</h1>
    <input type="text" placeholder="搜索" id="search" v-model="search" >
    <ul>
      <router-link :to="'show/'+ blog.id " tag="li" v-for="blog in filterBlog" :key='blog.id' >
        <h2 v-color="'random'">{{ blog.title }}</h2>
        <p>{{ blog.content | getnum(20)}} </p>
        <span>发表人:</span><span>{{ blog.sel }} </span>
        <b v-for="item in blog.check">{{ item  | format}}</b><b>相关信息:</b>
      </router-link>
    </ul>
  </div>
</template>
<script>
import axios from 'axios'

  export default{
    data(){
      return {
        blogsArr:[],
        search:''
      }
    },
    created() {
      this.getpost()
    },
    methods:{
      getpost(){
        this.$http.get('https://my-blog-ae84c.firebaseio.com/posts.json')
        // axios.get('https://my-blog-ae84c.firebaseio.com/posts.json')
        .then(ret => {
          console.log(ret)
          return ret.json()
          // return ret.data
        })
        .then(ret => {
          for( let key in ret){
            console.log(key)
            ret[key].id = key
            this.blogsArr.unshift(ret[key])
          }
          this.blogsArr = this.blogsArr.slice(0,10)
          // console.log(this.blogsArr)
        })
      }
    },
    directives:{
     'color':{
  bind(el,binding,nv){
     if(binding.value=='random'){
       el.style.color ='#' + Math.random().toString(16).slice(2,8)
     }
   }
},
      "theme":{
        bind(el,binding,nv){
          if(binding.arg=='blue'){
            el.style.backgroundColor="blue"
          }
        }
      }
    },
    filters:{
      'format':function(item){
        return item + ","
      },
      'getnum':(msg,num)=>{
        return msg.substring(0,num)+'...'
      }
    },
    computed:{
      'filterBlog':function(){
        return this.blogsArr.filter((item) => {
          return item.title.match(this.search)
        })
      }
    }
  }
</script>
<style scoped>
.show-container{
  max-width: 1260px;
  margin: 20px auto;
  padding: 10px 0;
  position: relative;
}
h1{
  text-align: center;

}
#search{
  position: absolute;
  right: 50px;
  top:40px;
  padding:4px;
  color:#999;
}
ul{
  list-style-type: none;
  /* display: flex; */
  
}
li{
  width:80%;
  background-color: #eee;
  padding: 20px;
  margin:10px auto 10px auto;
  cursor: pointer;
}
h2{
  margin:0;
  margin-bottom: 8px;
  padding: 0;
  text-align: center;
}
p{

}
span{
  font-size: 14px;
  color:#aaa;
}
b{
  float: right;
  color:#aaa;
  font-size: 14px;
}
</style>
